html {
  background: white;
  -webkit-overflow-scrolling: touch;
}

body {
  background-color: white;
}

.mui-slider-indicator {
  bottom: 12px;
}

.mui-slider-indicator .mui-indicator {
  box-shadow: none;
  background: rgba(0, 0, 0, .1);
  margin: 1px 2px;
}

#pick-city {
  padding: .3rem .5rem;
  margin-right: 1rem;
  pointer-events: none;

  &.bg-show {
    border-radius: 20%;
    background: white;
  }

  span {
    color: white;
    font-size: 14px;
    pointer-events: auto;
  }
}

.test {
  transform: translateY(-10px);
}

#search-btn {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  min-height: 32px;
  max-height: 32px;
  transition: all .5s;
  transform: translate3d(0, 0, 0);

  &.hidden {
    transform: translate3d(0, -70px, 0);
  }

  .bg-mid {
    text-align: center;
    padding: 5px 60px;
    background: rgba(255, 255, 255, .7);
    border-radius: 20px;
    z-index: 11;
    min-width: 50%;

    .icon {
      color: #f46800;
    }

    span {
      color: #999;
    }
  }
}

.city-house {

  .city-title {
    padding: .5rem .75rem;

    .icon {
      color: #f46800;
    }
  }

  .city-name {
    font-size: 18px;
    font-weight: 400;
    transform: translateX(-.75rem);
  }

  .house-des {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;

    .money {
      color: orangered;
      font-size: 16px;
      white-space: nowrap;
    }
    .dollar {
      font-size: 10px;
    }
  }

  .house-title {
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .house-address {
    margin-bottom: .5rem;
    font-size: 13px;
    color: #929292;
  }
}

.city-house-group {
  display: flex;
  flex-flow: row nowrap;
  overflow-x: scroll;
  padding-left: .75rem;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }

  .city-house-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    min-width: 90%;
    padding: .5rem .75rem .5rem 0;
    &.ont-item {
      min-width: 100%;
    }

    .house-img {
      min-width: 100%;
      align-self: flex-start;
      background-repeat: no-repeat;
      background-size: cover;
      outline: none;
      border: none;
    }
  }
}

@size: calc(100vw / 3 * 2);
#banner {
  min-height: @size;
  max-height: @size;
  background-repeat: no-repeat;
  background-size: cover;
}

/*.img-bg-container {
  min-height: @size;
  max-height: @size;
}*/

.city-group {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: .5rem .5rem 1rem .5rem;

  &::-webkit-scrollbar {
    display: none;
  }

  .city-item {
    margin-right: .5rem;
    position: relative;

    @size: 3rem;
    min-width: @size;
    max-width: @size;
    min-height: @size;
    max-height: @size;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .filter-bg {
      position: absolute;
      background: rgba(0, 0, 0, .2);
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      border-radius: 50%;
      z-index: 1;
    }

    .city-name {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      color: white;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      z-index: 2;
    }
  }
}

.look-more {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .des {
    font-size: 14px;
    color: #a2a2a8;
    .icon {
      font-size: 13px;
    }
  }
}

